<template>
	<view class="container" :style="{
					paddingTop:menuInfo.statusBarHeight
				}">
		<scroll-list id="scroll-list" class="pos_r" @scroll="scrollFun" :class="[isNoLogin ? 'no_login' : '']"
			ref="scroll" :page.sycn="page" :refresherEnabled="true" :scrollType="true" :reset="true"
			@loadmore="loadmore" @query="getRefresh"
			
			>
			<!-- title -->
			<h1>
				<span>寄存</span>
			</h1>
			<!-- banner -->
			<view class="banner">
				<u-swiper class="banner_swiper" :height="110" :radius="12" keyName="advertisementImgUrl"
					:list="bannerList" @click="bannerClick">
				</u-swiper>
			</view>
			<view class="content_div">
				<view id="tagb_div" class="tagb_title flex_center" v-if="!isNoLogin">
					<view class="mine_class flex_center" :class="[flexTagb ? 'flex_tagb' : '']">
						<view class="flex_start flex_items class_div">
							<scroll-view scroll-x="true" class="class_scroll" scroll-with-animation
								:scroll-into-view="`classSelect${categoryId}`">
								<view class="flex_center class_li pos_r" :id="`classSelect${item.id}`"
									@click="tabFn(item.id)" :class="[categoryId == item.id ? 'skew_select' : '']"
									v-for="(item, index) in list1" :key="item.id">
									<span class="bg pos_a"></span>
									<text>{{ item.name }}</text>
								</view>
							</scroll-view>
						</view>
					</view>
				</view>
				<view class="login_guide flex_center flex_column" v-if="isNoLogin">
					请账号登录，获得完整体验
					<button class="button_confirm flex_center" @click="isLogin">
						去登录
					</button>
				</view>
				<view v-else>
					<view class="er_screening flex_between flex_items">
						<view class="flex_between flex_items search_div">
							<view class="search flex_center flex1">
								<image mode="widthFix" src="@/static/image/search_icon1.png" alt="" />
								<input class="flex1" type="text" v-model="nftTitle" @blur="getRefresh"
									@confirm="getRefresh" placeholder="输入商品名称搜索" placeholder-class="input_plac" name=""
									id="" />
								<i class="shutDown_icon flex_center" v-show="nftTitle != ''" @click="nftTitle = ''">
									<image mode="widthFix" src="@/static/image/shutDown_icon3.png" alt="" />
								</i>
							</view>
						</view>
					</view>
					<view class="list_ul flex_warp flex_between">
						<template v-for="item in list">
							<view class="list_li">
								<goodsBuyLi :item.sync="item" :key="item.id"></goodsBuyLi>
							</view>
						</template>
					</view>
				</view>
			</view>
			<!-- 技术商标 -->
			<view class="flex_center trademark_div">
				<image mode="widthFix" src="@/static/image/trademark_img.png" alt="" />
			</view>
		</scroll-list>
	</view>
</template>

<script>
	import {
		getToken
	} from "@/utils/storage";
	import scrollList from "@/components/scroll-list/scroll-list";
	import goodsBuyLi from "../goods/components/buy_li.vue";
import { onLoad } from "../../uni_modules/uview-ui/libs/mixin/mixin";
	export default {
		components: {
			scrollList,
			goodsBuyLi
		},
		data() {
			return {
				menuInfo: null, //状态栏高度
				// 分类
				list1: [],
				categoryId: 0, //分类id

				//  导航置顶
				flexTagb: false,

				is_search: false, //打开搜索
				nftTitle: "", //筛选名称

				// banner
				bannerList: [],
				list: [], //商品列表
				page: {
					pageNum: 1,
					pageSize: 10,
					total: 0, //总条数
					pageTotal: 0, //当前条数
					status: "loading",
				},
				promptLoginShow: false,
				isNoLogin: false,

				// 悬浮按钮位置
				x: 0,
				y: 0,

				// swiper配置
				swiperOptionTop: {
					loop: true,
					effect: "fade",
					fadeEffect: {
						crossFade: true,
					},
					speed: 1000,
					observer: true,
					observeParents: true,
					autoplay: {
						delay: 2000,
						disableOnInteraction: false,
					},
				},
			}
		},
		watch: {
			is_search(val) {
				if (!val) {
					this.nftTitle = "";
					this.getRefresh();
				}
			},
		},
		created() {
			uni.getSystemInfo({
				success: (res) => {
					this.x = res.windowWidth - 56;
					this.y = res.windowHeight - 200;
				},
			});
		},
		async onLoad() {
			this.menuInfo = this.$store.getters["sys/getMenuInfo"];
			if (!getToken()) {
				this.getRefresh();
				this.isNoLogin = true;
				this.page.status = "period";
			} else {
				await this.$store.dispatch("user/GET_USER_INFO");
				this.userInfo = this.$store.getters["user/getUserInfo"];
				this.getRefresh();
				this.isNoLogin = false;
			}
		},

		methods: {
			isLogin() {
				promptDialogue({
					confirm: (vm) => {
						vm.show = false;
						this.$functions.goLogin();
					},
				});
			},
			// 获取仓库分类
			async getWarehouseCate() {
				await new Promise(async (resolve, reject) => {
					try {
						let {
							data
						} = await this.$api.order.getWarehouseCate();
						this.list1 = data;
						if (data.findIndex((e) => e.id == this.categoryId) < 0)
							this.categoryId = this.list1[0].id;
						resolve();
					} catch (error) {
						reject(error);
					}
				});
			},
			// 监听滚动方法
			scrollFun(e) {
				console.warn("滚动")
				uni.createSelectorQuery().in(this).select("#tagb_div").boundingClientRect((data) => {
					console.warn(9999,data)
						const { top } = data;
						this.flexTagb = top <= 10 ? true : false;
					})
					.exec();
			},

			close() {
				uni.switchTab({
					url: "/pages/home/home",
				});
			},
			// 获取商品列表
			getList() {
				if (!getToken()) return;
				const {
					pageNum,
					pageSize
				} = this.page;
				let data = {
					pageNum: pageNum,
					pageSize: pageSize,
					searchText: this.nftTitle,
					userId: this.userInfo.userId,
				};
				if (this.categoryId) data.categoryId = this.categoryId;

				if (pageNum == 1) {
					this.list = [];
				}
				this.$api.order
					.getSysMemberNftListAllNft(data)
					.then((e) => {
						let data = e.data;

						if (data.list) {
							this.list = pageNum == 1 ? data.list : [...this.list, ...data.list];
						}
						this.page.total = data.total;
						this.page.pageTotal = this.list.length;
						this.page.status = "loadmore";
						if (this.page.pageTotal >= this.page.total) {
							this.page.status = "period";
						}
					})
					.catch((e) => {
						this.list = [];
						this.$u.toast(e.message);
					});
			},
			// 获取banner
			async getBannerList() {
				const {
					data
				} = await this.$api.sys.getSysAdvertisementItemList({
					advertisementCode: "nft_collection_top",
					pageNum: 1,
					pageSize: 50,
					displayPort: "3",
				});
				if (!data) return;
				if (data.list) {
					this.bannerList = data.list;
				}
			},
			// banner点击
			bannerClick(index) {
				this.$functions.bannerAppInteraction(this.bannerList[index], () => {
					this.$functions.bannerGoPage(this.bannerList[index]);
				});
			},

			// 重置参数

			// 下拉刷新
			async getRefresh() {
				await this.getWarehouseCate();

				this.page.pageNum = 1;
				this.page.status = "loading";
				this.list = [];
				this.getList();
				this.getBannerList();

				setTimeout(() => {
					this.$refs.scroll.resetStyle();
				}, 1000);
			},
			//点击加载
			loadmore(item) {
				this.page.status = "loading";
				this.page.pageNum++;
				this.getList();
			},
			tabFn(id) {
				this.categoryId = id;
				this.page.pageNum = 1;
				this.page.status = "loading";
				this.getList();
			},
		}


	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(180deg,
				#befa50 0%,
				#ffffff 180rpx,
				#f6f6f6 100%) !important;
		width: 100vw;
		overflow-x: hidden;
	}
	
	::v-deep .po {
		top: 60% !important;
	}
	h1 {
		padding: 16rpx 32rpx 0 32rpx;
	
		span {
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi-Bold;
			font-weight: 500;
			font-size: 40rpx;
			color: #222222;
		}
	}
	.index {
		height: 100vh;
		width: 100vw;
		box-sizing: border-box;
	}
	::v-deep .tabpars {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 111;
	}	
	::v-deep .loading {
		padding-bottom: calc(env(safe-area-inset-bottom) + 80rpx);
	}
	
	#scroll-list {
		height: calc(100vh - 0rpx);
		box-sizing: border-box;
		width: 100%;
		// padding-bottom: 40rpx;
	}
	.content_div {
		position: relative;
		padding: 8rpx 32rpx 0 32rpx;
		overflow: hidden;
		z-index: 99;
	
		.list_ul {
			width: 100%;
	
			.list_li {
				width: calc(50% - 11rpx);
			}
		}
	
	}
	
	.my_warehouse {
		height: 128rpx;
		border-radius: 40rpx;
		background: #eff7f7;
		border: 2rpx solid #1a1a1a;
		padding: 0 24rpx;
		margin: 20rpx auto 10rpx 0;
	
		.left {
			i {
				width: 190rpx;
				font-size: 0;
			}
	
			span {
				transform: translateX(-16rpx);
				font-size: 48rpx;
				font-family: PingFang SC;
				-webkit-text-stroke: 1rpx #1a1a1a;
				font-weight: bold;
				text-stroke: 1rpx #1a1a1a;
				background: linear-gradient(180deg, #ffb743 0%, #fd8932 100%);
				-webkit-background-clip: text;
				color: #fd8932;
				line-height: 1em;
			}
		}
	
		.right {
			font-size: 24px;
			font-family: PingFang SC;
	
			font-weight: bold;
			color: #333333;
		}
	}
	
	.banner {
		opacity: 1;
		padding: 40rpx 32rpx 24rpx 32rpx;
	}
	
	.tagb_title {
		padding: 0 0 8rpx 0;
		width: 100%;
		margin-bottom: 20rpx;
		overflow: hidden;
	
		// 主分类
		.mine_class {
			width: 100%;
	
			&.flex_tagb {
				position: fixed;
				left: 0;
				right: 0;
				top: 0;
				padding: 24rpx 32rpx;
				z-index: 999;
				width: 100%;
				box-sizing: border-box;
				border-radius: 0 !important;
				background: linear-gradient(180deg, #befa50 0%, #ffffff 100%);
	
				.class_div {
					width: 100%;
					overflow: hidden;
				}
			}
	
			.class_div {
				width: 100%;
				flex-wrap: nowrap;
				// padding-right: 10rpx;
			}
	
			.class_scroll {
				white-space: nowrap;
			}
	
			.class_li {
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: 500;
				font-size: 30rpx;
				color: #a3a3a3;
				margin: 0 60rpx 0 0;
				white-space: nowrap;
				display: inline-flex;
				padding-bottom: 6rpx;
				// height: 40rpx;
				// line-height: 40rpx;
				// transform: translateY(-6rpx);
	
				&:last-child {
					margin-right: 32rpx;
				}
	
				text {
					padding: 0 2rpx;
					line-height: 1em;
				}
	
				&>image {
					display: block;
					width: 40rpx;
				}
	
				&.skew_select {
					font-family: AlibabaPuHuiTi, AlibabaPuHuiTi-Bold;
					font-weight: 500;
					font-size: 30rpx;
					color: #222222;
					transform: translateY(0rpx);
				}
			}
		}
	}
	// 未登录情况
	.login_guide {
		color: $nft-color-text1;
		font-size: 28rpx;
		min-height: 60vh;
		background: #f6f6f6;

		.button_confirm {
			width: 236rpx;
			height: 76rpx;
			font-size: 28rpx;
			margin-top: 40rpx;
		}
	}
	.trademark_div {
		position: absolute;
		left: 50%;
		bottom: calc(140rpx + env(safe-area-inset-bottom));
		transform: translateX(-50%);
	}
	
	.batchSell_li {
		width: 96rpx;
	
		&>img {
			width: 100%;
		}
	}
	// 二级筛选
	.er_screening {
		padding: 0 0 24rpx 0;
	
		.search_div {
			background: #f6f6f6;
			padding: 0 24rpx;
			height: 76rpx;
			border-radius: 120rpx;
			width: 100%;
			box-sizing: border-box;
	
			image {
				width: 36rpx;
			}
	
			input {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #000;
				margin-left: 16rpx;
			}
	
			.input_plac {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #a3a3a3;
			}
	
			.shutDown_icon {
				width: 36rpx;
			}
		}
	}
	.icon-text {
		width: 158rpx !important;
		height: initial !important;
	}
	
	::v-deep .flex_warp {
		overflow: initial !important;
	} 
	// .banner_swiper {
	// 	background: transparent !important;
	// }
	
	/* 
	





	*/
</style>